<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <base href="${baseURL}/"/>
        <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="assets/css/bootstrap-theme.css">        
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    </head>
    <body>
        <div class="row">
            <div class="col-md-9 col-md-offset-3">
                <form role="form" method="post" name="form-pessoa" action="app/usuario/confirmar" 
                      enctype="multipart/form-data" onsubmit="return validateForm();">

                    <div class="panel-heading">
                        <h1 class="panel-title"><c:if test="${not empty id}">Editar</c:if><c:if test="${empty id}">Adicionar</c:if> pessoa</h1>
                        </div>
                        <div class="panel-body">
                        <c:if test="${not empty id}">
                            <input class="form-control" type="hidden" name="id" value="${id}">
                        </c:if>
                        <div class="row">
                            <div class="form-group row"> 
                                <div class="form-group <c:if test="${not empty erro.nome}">has-error</c:if>">
                                        <label class="control-label col-lg-4" for='nome'>Nome</label>
                                        <div class="col-lg-8" >
                                            <input class="form-control" type="text" id="nome" name="nome" value="${pessoa.nome}"
                                               style="width:350px" placeholder="Informe o nome"/>
                                        <span class="help-block">${erro.nome}</span>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row">
                                <div class="form-group <c:if test="${not empty erro.email}">has-error</c:if>">
                                        <label for="email" class="col-md-4 control-label">Email</label>
                                        <div class="col-md-3">
                                            <input type="email" class="form-control" id="email" name="email" maxlengh="40" value="${pessoa.email}"
                                               style="width:350px" placeholder="Email">
                                        <span class="help-block">${erro.email}</span>
                                    </div>
                                </div>
                            </div>                                         

                            <div class="form-group row">
                                <label for="senha" class="col-md-4 control-label">Senha</label>
                                <div class="col-md-3">
                                    <input type="password" class="form-control" id="senha" name="senha" maxlengh="20"
                                           style="width:200px" placeholder="Senha"/>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="confirmasenha" class="col-md-4 control-label">Confirmação senha</label>
                                <div class="col-md-3">
                                    <input type="password" class="form-control" id="confirmasenha" name="confirmasenha" maxlengh="20"
                                           style="width:200px" placeholder="Confirmar senha"/>
                                </div>
                            </div> 

                            <div class="form-group row">
                                <label for="endereco" class="col-md-4 control-label">Endere&ccedil;o</label>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" id="endereco" name="endereco" maxlengh="40" value="${pessoa.endereco.endereco}"
                                           style="width:350px" placeholder="Endereço">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="numero" class="col-md-4 control-label">Numero</label>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" id="endereco" name="numero" maxlengh="40" value="${pessoa.endereco.numero}"
                                           style="width:350px" placeholder="Endereço">
                                </div>
                            </div>   

                            <div class="form-group row">
                                <label for="complemento" class="col-md-4 control-label">Complemento</label>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" id="complemento" name="complemento" maxlengh="40" value="${pessoa.endereco.complemento}"
                                           style="width:350px" placeholder="Complemento">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="bairro" class="col-md-4 control-label">Bairro</label>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" id="bairro" name="bairro" maxlengh="40" value="${pessoa.endereco.bairro}"
                                           style="width:350px" placeholder="Bairro">
                                </div>
                            </div>                                            
                            <div class="form-group row">
                                <label for="estado" class="col-md-4 control-label">Estado</label>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" id="estado" name="estado" maxlengh="40" value="${pessoa.endereco.estado}"
                                           style="width:350px" placeholder="Estado">
                                </div>
                            </div> 
                            <div class="form-group row">
                                <label for="nascimento" class="col-md-4 control-label">Data nascimento</label>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" id="datanascimento" name="nascimento" maxlength="12" 
                                           style="width:180px" placeholder="dd/mm/aaaa"
                                           value="<fmt:formatDate pattern="dd/MM/yyyy" value="${pessoa.nascimento.time}"/>"/>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="estadocivil" class="col-md-4 control-label">Estado civil</label>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" id="estadocivil" name="estadocivil" maxlengh="40" value="${pessoa.estadoCivil}"
                                           style="width:350px" placeholder="Estado civil">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="cpf" class="col-md-4 control-label">Cpf</label>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" id="cpf" name="cpf" maxlengh="40" value="${pessoa.cpf}"
                                           style="width:350px" placeholder="Cpf">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="identidade" class="col-md-4 control-label">RG</label>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" id="identidade" name="identidade" maxlengh="40" value="${pessoa.identidade}"
                                           style="width:350px" placeholder="RG">
                                </div>
                            </div> 

                            <div class="form-group row">
                                <label for="telefone" class="col-md-4 control-label">Telefone</label>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" id="telefone" name="telefone" maxlengh="40" value="${pessoa.telefone}"
                                           style="width:350px" placeholder="Telefone">
                                </div>
                            </div>   

                            <div class="form-group row">
                                <label for="sexo" class="col-md-4 control-label">sexo</label>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" id="sexo" name="sexo" maxlengh="40" value="${pessoa.sexo}"
                                           style="width:350px" placeholder="sexo">
                                </div>
                            </div>   
                            <div class="form-group row">
                                <label for="cep" class="col-md-4 control-label">cep</label>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" id="cep" name="cep" maxlengh="40" value="${pessoa.endereco.cep}"
                                           style="width:350px" placeholder="cep">
                                </div>
                            </div> 
                        </div>                            
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">Enviar</button>                            
                        <button type="reset" class="btn btn-default">Limpar</button>                       
                    </div>
            </div>
        </form>
    </div>
</div>                       
</body>
</html>
